<template>
  <div class="Date">
    <div class="content">
      <div class="title">
        <div class="esc" @click="esc">取消</div>
        <div class="ack" @click="ack">确认</div>
      </div>
      <picker-view
        :value="value"
        indicator-style="indicatorStyle"
        @change="bindChange"
        class="picker-view"
      >
        <picker-view-column>
          <div class="item" v-for="(hour, index) in hours" :key="index">
            {{ hour < 10 ? '0' + hour : hour }}时
          </div>
        </picker-view-column>
        <picker-view-column>
          <div class="item" v-for="(minute, index) in minutes" :key="index">
            {{ minute < 10 ? '0' + minute : minute }}分
          </div>
        </picker-view-column>
      </picker-view>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'

export default {
  props: {
    selectedTime: {
      type: String,
      default: '',
    },
  },
  setup(props, { emit }) {
    const hours = ref([])
    const minutes = ref([])
    const hour = ref('')
    const minute = ref('')
    const value = ref([])

    const init = () => {
      const hoursArray = []
      const minutesArray = []
      for (let i = 0; i < 24; i++) {
        hoursArray.push(i)
      }
      for (let i = 0; i < 60; i++) {
        minutesArray.push(i)
      }
      hours.value = hoursArray
      minutes.value = minutesArray

      const date = new Date()
      const hourVal = date.getHours()
      const minuteVal = date.getMinutes()
      const selectedHour = new Date(props.selectedTime).getHours() || hourVal
      const selectedMinute = new Date(props.selectedTime).getMinutes() || minuteVal
      setTimeout(() => {
        value.value = [selectedHour, selectedMinute]
        hour.value = selectedHour < 10 ? `0${selectedHour}` : selectedHour
        minute.value = selectedMinute < 10 ? `0${selectedMinute}` : selectedMinute
      }, 0)
    }

    const bindChange = (e) => {
      const val = e.detail.value
      hour.value = hours.value[val[0]] < 10 ? `0${hours.value[val[0]]}` : hours.value[val[0]]
      minute.value =
        minutes.value[val[1]] < 10 ? `0${minutes.value[val[1]]}` : minutes.value[val[1]]
      value.value = [val[0], val[1]]
    }

    const esc = () => {
      emit('popType', false)
    }

    const ack = () => {
      const time = `${hour.value}:${minute.value}`
      emit('timeSelected', time)
    }

    onMounted(init)

    return {
      hours,
      minutes,
      hour,
      minute,
      value,
      bindChange,
      esc,
      ack,
    }
  },
}
</script>

<style scoped>
.Date {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
}

.content {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 700rpx;
  background: #ffffff;
  border-radius: 20rpx 20rpx 0rpx 0rpx;
  padding-bottom: 30rpx;
  box-sizing: border-box;
}

.title {
  display: flex;
  align-items: center;
  flex: none;
  position: relative;
  width: 100%;
  height: 114rpx;
  font-size: 36rpx;
  font-weight: 500;
  color: #333333;
  overflow: hidden;
}

.title img.title_b {
  width: 100%;
  height: 114rpx;
}

.esc {
  position: absolute;
  z-index: 1;
  left: 40rpx;
  font-size: 40rpx;
  color: #5199ff;
}

.ack {
  position: absolute;
  z-index: 1;
  right: 40rpx;
  font-size: 40rpx;
  color: #5199ff;
}

.picker-view {
  width: 750rpx;
  height: 586rpx;
  margin-top: 20rpx;
}

.item {
  font-size: 40rpx;
  font-weight: 500;
  line-height: 68rpx;
  text-align: center;
}
</style>
